<template>
  <el-tabs type="border-card">
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-user"></i> 人数统计
      </span>
      <div class="pie">
        <div id="pie1">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div id="main1" style="margin-left:50px;width:800px;height: 450px"></div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-date"></i> 考勤统计
      </span>
      <div class="pie">
        <div id="pie1">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div id="main2" style="margin-left:50px;width:800px;height: 450px"></div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-school"></i> 退班转班统计
      </span>
      <el-tabs tab-position="left" style="height: 450px;">
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-remove-outline"></i> 退班统计
          </span>
          <div class="pie">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="main3" style="margin-left:50px;width:800px;height: 450px"></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-sort"></i> 转班统计
          </span>
          <div class="pie">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="main4" style="margin-left:50px;width:800px;height: 450px"></div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-coin"></i> 费用统计
      </span>
      <el-tabs tab-position="left" style="height: 450px;">
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-wallet"></i> 学费费用状态统计
          </span>
          <div class="pie">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="main5" style="margin-left:50px;width:800px;height: 450px"></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-wallet"></i> 退班费用状态统计
          </span>
          <div class="pie">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="main6" style="margin-left:50px;width:800px;height: 450px"></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-wallet"></i> 转班费用状态统计
          </span>
          <div class="pie">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="main7" style="margin-left:50px;width:800px;height: 450px"></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-wallet"></i> 其他费用状态统计
          </span>
          暂未开通其他费用
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-s-marketing"></i> 就业统计
      </span>
      <div class="pie">
        <div id="pie1">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div id="main8" style="margin-left:50px;width:800px;height: 450px"></div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

export default {
  data () {
    return {}
  },
  created () {},
  mounted () {
    this.initAttendanceData()
    this.initRoleData()
    this.initQuitClassData()
    this.initTransferClassData()
    this.initTuitionData()
    this.initQuitTuitionData()
    this.initTransferTuitionData()
    this.initEmployment()
  },
  methods: {
    // 初始化数据
    initEmployment () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main8'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '学生就业数据统计',
          subtext: '统计分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['已就业', '未就业', '离职', '在职']
        },
        series: [
          {
            name: '数据分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 5, name: '已就业' },
              { value: 1, name: '未就业' },
              { value: 1, name: '离职' },
              { value: 5, name: '在职' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initTransferTuitionData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main7'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '学生转班费用数据统计',
          subtext: '统计分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['已缴费', '未缴费', '已退费', '未退费']
        },
        series: [
          {
            name: '数据分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 5, name: '已缴费' },
              { value: 3, name: '未缴费' },
              { value: 5, name: '已退费' },
              { value: 1, name: '未退费' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initQuitTuitionData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main6'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '学生退班费数据统计',
          subtext: '统计分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['已退费', '未退费']
        },
        series: [
          {
            name: '数据分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 8, name: '已退费' },
              { value: 2, name: '未退费' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initTuitionData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main5'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '学生学费数据统计',
          subtext: '统计分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['已缴费', '未缴费']
        },
        series: [
          {
            name: '数据分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 6, name: '已缴费' },
              { value: 1, name: '未缴费' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initTransferClassData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main4'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '学生转班数据统计',
          subtext: '统计分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['已批阅', '未批阅']
        },
        series: [
          {
            name: '数据分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 8, name: '已批阅' },
              { value: 2, name: '未批阅' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initQuitClassData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main3'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '学生退班数据统计',
          subtext: '统计分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['已批阅', '未批阅']
        },
        series: [
          {
            name: '数据分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 8, name: '已批阅' },
              { value: 2, name: '未批阅' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initRoleData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '角色用户数据统计',
          subtext: '统计分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['管理员', '学生', '老师', '辅导员']
        },
        series: [
          {
            name: '数据分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 1, name: '管理员' },
              { value: 1, name: '辅导员' },
              { value: 7, name: '学生' },
              { value: 1, name: '老师' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    initAttendanceData () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main2'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '学生考勤数据统计',
          subtext: '统计分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['旷课', '迟到', '请假', '正常打卡']
        },
        series: [
          {
            name: '数据分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 1, name: '旷课' },
              { value: 2, name: '迟到' },
              { value: 3, name: '请假' },
              { value: 7, name: '正常打卡' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
